﻿<!doctype html>
<html class="no-js" lang="zxx" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <title>时尚衣橱购物商城</title>
    <meta name="description" content="Default Description">
    <meta name="keywords" content="E-commerce" />
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- place favicon.ico in the root directory -->
    <link rel="shortcut icon" type="image/x-icon" href="img/icon/favicon.png">
    <!-- Google Font css -->
    <link href="https://fonts.googleapis.com/css?family=Lily+Script+One" rel="stylesheet">

    <!-- mobile menu css -->
    <link rel="stylesheet" href="/css/meanmenu.min.css">
    <!-- animate css -->
    <link rel="stylesheet" href="/css/animate.css">
    <!-- nivo slider css -->
    <link rel="stylesheet" href="/css/nivo-slider.css">
    <!-- owl carousel css -->
    <link rel="stylesheet" href="/css/owl.carousel.min.css">
    <!-- slick css -->
   <link rel="stylesheet" href="/css/slick.css">
    <!-- price slider css -->
    <link rel="stylesheet" href="/css/jquery-ui.min.css">
    <!-- fontawesome css -->
    <link rel="stylesheet" href="/css/font-awesome.min.css">
     <!-- fancybox css -->
    <link rel="stylesheet" href="/css/jquery.fancybox.css">
    <!-- bootstrap css -->
    <link rel="stylesheet" href="/css/bootstrap.min.css">
    <!-- default css  -->
    <link rel="stylesheet" href="/css/default.css">
    <!-- style css -->
   <!-- <link rel="stylesheet" href="../static/css/style.css">-->
    <!-- responsive css -->
    <link rel="stylesheet" href="/css/responsive.css">
    <link rel="stylesheet" href="/css/responsive.css">
    <link rel="stylesheet" href="/css/responsive.css">
    <link rel="stylesheet" href="/css/shortcode/header.css">
    <link rel="stylesheet" href="/css/shortcode/service.css">
    <link rel="stylesheet" href="/css/shortcode/product.css">
    <link rel="stylesheet" href="/css/shortcode/slider.css">
    <link rel="stylesheet" href="/css/shortcode/parallax.css">
    <link rel="stylesheet" href="/css/shortcode/login.css">
    <link rel="stylesheet" href="/css/shortcode/subscribe.css">
    <link rel="stylesheet" href="/css/shortcode/footer.css">
    <link rel="stylesheet" href="/css/shortcode/shop.css">
    <link rel="stylesheet" href="/css/shortcode/theme-default.css">
    <link rel="stylesheet" href="/css/shortcode/blog.css">
    <link rel="stylesheet" href="/css/shortcode/header.css">
    <link rel="stylesheet" href="/css/shortcode/theme-default.css">
    <link rel="stylesheet" href="/css/shortcode/single-product.css">
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 20px;
        }
        .comment {
            margin-bottom: 20px;
            padding: 15px;
            border: 1px solid #ddd;
            border-radius: 5px;
            background-color: #f9f9f9;
        }
        .comment .name {
            font-weight: bold;
            font-size: 1.2em; /* 名字字体稍大 */
            margin-bottom: 10px;
        }
        .comment .details {
            display: flex;
            justify-content: space-between;
            margin-bottom: 10px;
            font-size: 0.9em; /* 商品信息字体稍小 */
            color: #999; /* 浅灰色字体 */
        }
        .comment .text {
            margin-top: 10px;
        }
        .comment img {
            max-width: 100%; /* 评论图片最大宽度 */
            height: auto;
            margin-top: 10px;
        }
    </style>
    <script>
        window.onload = function() {
            $(document).ready(function() {
                var msg = '[[${msg}]]'; // 使用Thymeleaf语法获取后端传递的消息
                if (msg !== '') {
                    alert(msg); // 如果有消息，则弹出提示框
                }
            });
        }
    </script>
    <!-- modernizr js -->
    <script src="/js/vendor/modernizr-2.8.3.min.js"></script>
</head>

<body>


    <!-- Wrapper Start -->
    <div class="wrapper">
        <!-- Header Area Start -->
        <header>
            <!-- Kiosk Header Top Start -->
            <div class="kiosk-header-top">
                <div class="container">
                    <div class="row">
                        <!-- Header Top left Start -->                        
                        <div class="col-lg-6 col-md-12 d-center">
                            <div class="kiosk-header-top-left">
                                <i class="fa fa-phone"></i>中软国际: 400-183-1066
                            </div>                        
                        </div>
                        <!-- Header Top Right Start -->                                       
                        <div class="col-lg-6 col-md-12">
                            <div class="kiosk-header-top-right">
                                <div class="search-box-view">
                                    <form action="#">
                                        <input type="text" class="email" placeholder="Search Your Product" name="product">
                                        <button type="submit" class="submit"></button>
                                    </form>
                                </div>
                                <!-- Header-list-menu End -->
                            </div>
                        </div>
                        <!-- Header Top Right End -->
                    </div>
                </div>
                <!-- Container End -->
            </div>
            <!-- Header Top End -->
            <!-- Kiosk Header Bottom Start -->
            <div th:include="top :: topFragment"></div>
            <!-- Header Bottom End -->
        </header>
        <!-- Header Area End -->


<!--         用于加入购物车、添加收藏表单-->
         <form id="productForm" method="post">
             <input type="hidden" th:value="${shop.c_id}" name="c_id" id="c_id">
             <input type="hidden" th:value="${shop.c_name}" name="c_name" id="c_name">
           <!--  <input type="hidden" th:value="${shop.cd_id}" name="cd_id" id="cd_id"/>-->
<!--              颜色id，尺寸id，和数量在下面传-->

        <!-- Product Thumbnail Start -->
        <div class="kiosk-product-details ptb-70">
            <div class="container">
                <div class="row">
                    <!-- Main Thumbnail Image Start -->
                    <div class="col-lg-5">
                        <!-- Thumbnail Large Image start -->
                        <div class="tab-content">
                            <div id="thumb1" class="tab-pane active">
                                <span th:value="${shop.c_picture1}" >
                                <a id="productHref" data-fancybox="images" th:href="|/clothes/${shop.c_picture1}|"  >
                                    <img id="productImg" th:src="|/clothes/${shop.c_picture1}|" alt="product-view">
                                </a>
                                </span>
                            </div>
                        </div>
                        <div class="kiosk-product-thumb">
                        </div>
                    </div>

                    <div class="col-lg-7">
                        <div class="kiosk-product-description fix">
                            <h3 class="product-header head-h3" th:text="${shop.c_name}" ></h3>
                            <div class="pro-price mb-10">
                                <p class="product-price" id="priceP">
                                    ￥<span id="priceSelect" class="price" th:text="${shop.c_price}" name="c_price" th:value="${shop.c_price}"></span></p>
                            </div>
                            <p class="pb-20 border-bottom" th:text="${shop.c_desc}"></p>
                            <!--<div class="pro-ref mtb-15">
                                <p><span class="in-stock">可用性:</span><span th:if="${shopetail.c_number!=null}" class="sku">有货</span></p>
                            </div>-->
                            <div class="pro-ref mb-15">
                                <p><span class="in-stock">类别:</span><span th:each="type:${typeList}" th:text="${type.type_name}" class="sku"></span></p>
                            </div>
                            <div class="pro-ref mb-15">
                                <p style="display: inline-block"><span class="in-stock">尺码:</span>
                                <div id="sizeInfo" style="display: inline-block">
                                <div id="sizeTo">
                                    <select th:onchange="changeBySize()" id="selectSize" style="width: 100px" name="size_id">
                                        <option th:each="size:${sizeList}" th:text="${size.size_name}" th:value="${size.size_id}" ></option>
                                    </select>
                                </div>
                            </div>
                                </p>
                            </div>
                            <div class="pro-ref mb-15">
                                <p><span class="in-stock">颜色:</span>
                                    <select th:onchange="changeByColor()" id="colorSelect" style="width: 100px"  name="color_id">
                                        <option th:each="color:${colorList}" th:text="${color.color_name}" th:value="${color.color_id}"></option>
                                    </select>
                                    </p>
                            </div>
                            <div class="box-quantity">
<!--                                <form action="#">-->
                                    <label >数量</label>
                                    <input class="number" id="numeric" type="number" min="1" value="1" name="quantity">
<!--                                </form>-->
                            </div>
                            <div class="product-link">
                                <ul class="list-inline">
                                    <li><input type="button" onclick="addCart()" value="加入购物车" class="kiosk-login-btn"/></li>
                                    <li><input type="button" onclick="addWishlist()" value="加入收藏" class="kiosk-login-btn"/></li>
                                    <li><input type="button" onclick="buyShop()" value="购买" class="kiosk-login-btn"/></li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
            </form>



        <!-- Product Thumbnail End -->
        <!-- Product Thumbnail Description Start -->
        <div class="kiosk-thumbnail-area pb-60">
            <div class="container">
                <div class="row">
                    <div class="col-sm-12">
                        <ul class="kiosk-thumb-header nav">
                            <li><a class="active" data-toggle="tab" href="#dtail" onclick="lookRemark()" id="viewCommentsBtn">评价</a></li>
                            <li><a data-toggle="tab" href="#review" onclick="addRemark()" id="writeCommentsBtn">写评价</a></li>
                        </ul>


                        <div class="tab-content thumb-content border-default" id="addRemarkDiv">
<!--                                ajax动态生成评论区-->
                                <div id="viewCommentsDiv"></div>
                            <!-- 写评价开始 -->
                            <div id="writeCommentsDiv" class="tab-pane">
                                <form action="/addRemark" method="post" id="remarkForm" enctype="multipart/form-data">
                                    <input type="hidden" name="c_id" th:value="${shop.c_id}">
                                <div class="review">
                                    <h4 class="review-mini-title">综合评价</h4>
                                         <div id="start" style="display: inline-block">
                                             <select id="selectStart" name="remark_score">
                                                 <option value="0.0" disabled selected>请选择星级</option>
                                                 <option value="1.0">一星</option>
                                                 <option value="2.0">二星</option>
                                                 <option value="3.0">三星</option>
                                                 <option value="4.0">四星</option>
                                                 <option value="5.0">五星</option>
                                             </select>
                                        </div>
                                </div>
                                <div class="review mt-30">
                                    <!-- Reviews Field Start -->
                                    <div class="riview-field">
                                        <h6 class="pb-15">留下您的评论，帮助更多用户选购</h6>
                                        <div class="sign__group">
                                            <input type="file" name="remark_msg" class="comment img" value="添加图片">
                                        </div>
                                            <div class="form-group">
                                                <label class="req" for="comments"></label>
                                                <textarea class="form-control" rows="4" id="comments" required="required" name="remark_content"></textarea>
                                            </div>
                                            <button class="btn-submit" onclick="submitRemark()">提交</button>

                                    </div>
                                    <!-- Reviews Field Start -->
                                </div>
                                </form>
                                <!-- Reviews End -->
                            </div>

                        </div>

                        <!-- 写评价结束 -->
                    </div>
                </div>
                <!-- Row End -->
            </div>
            <!-- Container End -->
        </div>
        <!-- Product Thumbnail Description End -->
        <!-- Realted Product Start -->
        <!-- Realted Product End -->
        <!-- newsletter Start -->
        <div th:include="lop :: topFragment"></div>
        <!-- newsletter end -->

    </div>
    <!-- Wrapper End -->
    <!-- jquery 3.12.4 -->
    <script src="/js/vendor/jquery-1.12.4.min.js"></script>
    <!-- mobile menu js  -->
    <script src="/js/jquery.meanmenu.min.js"></script>
    <!-- scroll-up js -->
    <script src="/js/jquery.scrollUp.js"></script>
    <!-- owl-carousel js -->
    <script src="/js/owl.carousel.min.js"></script>
    <!-- slick js -->
    <script src="/js/slick.min.js"></script>
    <!-- wow js -->
    <script src="/js/wow.min.js"></script>
    <!-- price slider js -->
    <script src="/js/jquery-ui.min.js"></script>
    <script src="/js/jquery.countdown.min.js"></script>
    <!-- nivo slider js -->
    <script src="/js/jquery.nivo.slider.js"></script>
    <!-- fancybox js -->
    <script src="/js/jquery.fancybox.min.js"></script>
    <!-- bootstrap -->
    <script src="/js/bootstrap.min.js"></script>
    <!-- popper -->
    <script src="/js/popper.js"></script>
    <!-- plugins -->
    <script src="/js/plugins.js"></script>
    <!-- stellar -->
    <script src="/js/jquery.stellar.min.js"></script>
    <script src="/js/parallax.js"></script>
    <!-- main js -->
    <script src="/js/main.js"></script>
<script>
    //提交评论表单
    function submitRemark(){
        $("#remarkForm").submit();
        location.reload();
    }
    //评论区ajax动态生成
    window.onload=function (){
        lookRemark();}
        function lookRemark(){
            $("#viewCommentsDiv").html("");
            //控制展示评论和写评论的显示和隐藏->显示评论，隐藏写评论
            document.getElementById('viewCommentsBtn').addEventListener('click', function() {
                document.getElementById('writeCommentsDiv').style.display = 'none';
                document.getElementById('viewCommentsDiv').style.display = 'block';
                // 在这里可以调用你的ajax函数来加载评论
            });
            var cid=$("#c_id").val();
            $.ajax({
                url:"/showRemark",
                type:"post",
                data:{c_id:cid},
                success:function(remarkList){
                    for (var i=0;i<remarkList.length;i++){
                        var remark=remarkList[i];
                        var divRemark="<div id=\"comments\">  \n" +
                            "        <div class=\"comment\">  \n" +
                            "            <div class=\"name\">"+remark.user_name+"</div>  \n" +
                            "            <div class=\"details\">  \n" +
                            "                <div>商品 - 尺码 - 颜色</div>  \n" +
                            "                <div>"+remark.remark_score+"星</div> " +
                            "                <div>"+remark.remark_time+"</div>  \n" +
                            "            </div>  \n" +
                            "            <div class=\"text\">"+remark.remark_content+"</div>  \n" +
                            "            <img src=\"/remark/"+remark.remark_picture+"\" alt=\"评论图片\" style=margin:auto>  \n" +
                            "        </div>  \n" +
                            "    </div>  "
                        $("#viewCommentsDiv").append(divRemark);
                    }
                },
                dataType:"json"
            })
    }
    function addRemark(){
        //控制展示评论和写评论的显示和隐藏->显示写评论，隐藏展示评论
     $("#commentsSectionDiv").html("");
        document.getElementById('writeCommentsBtn').addEventListener('click', function() {
            document.getElementById('viewCommentsDiv').style.display = 'none';
            document.getElementById('writeCommentsDiv').style.display = 'block';
        });
    }
    function addCart(){
        $("#productForm").attr("action","/addCart");
        $("#productForm").submit();
    }
    function addWishlist(){
        $("#productForm").attr("action","/addWishlist");
        $("#productForm").submit();
    }
    function changeByColor(){
        //通过选择的颜色，改变图片
        var colorid = $("#colorSelect option:selected").val();
        var cid=$("#c_id").val();
        $.ajax({
            url:"/getDetailsByColor",
            type:"post",
            data:{c_id:cid,color_id:colorid},
            success:function(result){
                $("#sizeTo").remove();
                var sizediv="<div id=\"sizeTo\">\n" +
                    " </div>";
                var selectdiv="<select name='size_id' onchange=\"changeBySize()\" id='selectSize' style=\"width: 100px\"></select>";
                $("#sizeInfo").append(sizediv);
                $("#sizeTo").append(selectdiv);
                for(var i=0;i<result.length;i++){
                    var shopdetail = result[i];
                    var adddiv="<option text="+shopdetail.size_name+" value="+shopdetail.size_id+">"+shopdetail.size_name+"</option>";
                    $("#productImg").attr("src","/clothes/"+shopdetail.c_picture2);
                    $("#productHref").attr("href","/clothes/"+shopdetail.c_picture2);
                    // $("#sizeSelect").attr("value",shopdetail.size_name);
                    $("#selectSize").append(adddiv);
                }
                // var shopdetail = result[0];
                // $("#productImg").attr("src","/clothes/"+shopdetail.c_picture2);
                // $("#productHref").attr("href","/clothes/"+shopdetail.c_picture2);
            },dataType:"json"
        });

    }
    function changeBySize(){
        var size_id=$("#selectSize option:selected").val();
        var c_id=$("#c_id").val();
        $.ajax({
            url:"/getDetailBySize",
            type: "post",
            data:{c_id:c_id,size_id:size_id},
            success:function (result){
                $("#priceSelect").remove();
                var priceSpan="<span value=\""+result+"\" id=\"priceSelect\" name=\"c_price\" class=\"price\" text=\""+result+"\">"+result+"</span>"
                $("#priceP").append(priceSpan);
            },dataType: "json"
        });
    }
    function buyShop(){
        var c_id=$("#c_id").val();
        var size_id=$("#selectSize option:selected").val();
        var color_id=$("#colorSelect option:selected").val();
        var od_number=$("#numeric").val();
        $.ajax({
            url:"/toByShop",
            type:"post",
            data:{c_id:c_id,size_id:size_id,color_id:color_id,od_number:od_number},
            success:function (result){
                alert(result.msg);
                if (result.msg=="购买成功，请等待处理..."){
                    //实时验证订单是否生成成功
                    checkOrderDisposeSuccess(result.data);
                }
            },dataType:"json"
        });
    }
    function checkOrderDisposeSuccess(order_id){
        window.setInterval(function (){
            //验证该订单是否生成成功
            //发送一个异步请求，发送到一个可以查询指定订单是否生成成功的控制器上去
            $.ajax({
                url:"/checkOrderDisposeSuccess",
                type:"post",
                data:{order_id:order_id},
                success:function (result){
                    if (result=="SUCCESS"){
                        //跳转到结算页面上去
                        window.location.href="toCheckout?order_id="+order_id;
                    }
                }
            });
        },500)
    }
</script>
</body>
</html>
